<template>
  <div>
    <Card title="提单页面">
      <section slot="cRight"></section>
      <Table :tableData="paneB.tableDataA" @blur="handleBlur"></Table>
      <Card title="选择产品" style="margin-top: 20px">
        <el-checkbox-group v-model="paneB.checkedOptions" :max="1">
          <el-checkbox
            v-for="(option, index) in paneB.options"
            :label="option"
            :key="index"
          >
            {{ option }}
          </el-checkbox>
        </el-checkbox-group>
        <div v-if="paneB.checkedOptions.length">
          <Card title="产品属性" style="margin-top: 20px">
            <div slot="cRight">
              <el-button size="mini" type="primary">
                <a
                  href="http://119.23.15.173/down/%E8%AE%A2%E5%8D%95%E6%A8%A1%E6%9D%BF.xlsx"
                  >订单模版下载</a
                >
              </el-button>
              <el-button size="mini" type="primary" @click="upload = true"
                >批量导入</el-button
              >
            </div>
            <Table :tableData="paneB.tableDataC" selection />
          </Card>
        </div>
      </Card>
    </Card>

    <Card title="其他信息">
      <Table :tableData="paneB.tableDataE" />
    </Card>

    <section>
      <el-button
        type="primary"
        style="float: right"
        @click="
          handleAdd()
          $message({
            message: '提单成功，订单号为 D258628',
            type: 'success'
          })
        "
        >确认提单</el-button
      >
    </section>

    <!-- 订单模板导入 -->
    <el-dialog
      title="批量导入"
      :visible.sync="upload"
      width="60%"
      top="6vh"
      style="paddingbottom: 50px"
    >
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer">
        <el-button @click="upload = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            upload = false
            handleChange()
            $message({
              message: '上传成功',
              type: 'success'
            })
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },
  data() {
    return {
      upload: false,
      checkedOptionsA: ['68元/月'],
      paneB: {
        visibleA: false,
        visibleB: false,
        activeList: [
          {
            title: '工单提交',
            desc: ''
          },
          {
            title: '管理员审批',
            desc: ''
          },
          {
            title: '网络部',
            desc: '审批记录：2019/6/21；李达；专线A端已施工、专线Z端已施工'
          },
          {
            title: '通过',
            desc: ''
          }
        ],
        active: 3,
        checkedOptions: [],
        options: ['专网专线', '数据专线', '国际专网专线'],
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '公司编码'
            },
            {
              prop: 'colC',
              label: '客户所在地'
            },
            {
              prop: 'colD',
              label: '是否VIP'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: '',
              colE: ''
            }
          ]
        },
        tableDataB: {
          col: [
            {
              prop: 'colA',
              label: '产品资费'
            }
          ],
          row: [
            {
              colA: '68元/月'
            }
          ]
        },
        tableDataC: {
          col: [
            {
              prop: 'colA',
              label: '月功能费'
            },
            {
              prop: 'colB',
              label: '保障等级'
            },
            {
              prop: 'colC',
              label: '最大时延要求'
            },
            {
              prop: 'colD',
              label: '带宽'
            },
            {
              prop: 'colE',
              label: '接入方式'
            },
            {
              prop: 'colF',
              label: 'A端省'
            },
            {
              prop: 'colG',
              label: 'Z端省'
            }
          ],
          row: [
            {
              colA: '100元',
              colB: 'AAA',
              colC: '2000',
              colD: '1G',
              colE: 'OTN',
              colF: '北京',
              colG: '上海'
            },
            {
              colA: '100元',
              colB: 'AAA',
              colC: '2000',
              colD: '1G',
              colE: 'OTN',
              colF: '北京',
              colG: '重庆'
            }
          ]
        },
        tableDataE: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        }
      }
    }
  },
  methods: {
    handleAdd() {
      this.$bus.$emit('addsl')
    },
    handleBlur() {
      this.paneB.tableDataA.row = [
        {
          colA: '盛丰公司',
          colB: 'A3312121231',
          colC: '北京',
          colD: '是'
        }
      ]
      this.paneB.tableDataE.row = [
        {
          colA: '张方',
          colB: 'A3312124521'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-demo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
a {
  text-decoration: none;
  color: #fff;
}
</style>
